<template>
  <div class="appointment-again">
    <div class="result-top">
      <img src="../../assets/icon/station-r.png">
      <h2 class="result-title">5F-102</h2>
      <p class="tip">当前所选工位号</p>
    </div>

    <AppointmentRadio
      :appointmentPeople="appointmentPeople"
      :timePeriod="timePeriod"
      @change="change"
    >
      <div slot="other" class="other" v-show="appointmentPeople === '2'">
        <yd-cell-item class="item">
          <span slot="left">预约人数</span>
          <yd-input slot="right" v-model="num" max="4" required></yd-input>
        </yd-cell-item>

        <div class="otherInfo">
          <div class="left">预约人</div>
          <div class="right">
            <yd-cell-item class="name">
              <yd-input slot="right" v-model="name" max="20" required :show-clear-icon="false"></yd-input>
            </yd-cell-item>
            <yd-cell-item class="phone">
              <yd-input slot="right" v-model="phone" max="11" ref="phone" required regex="mobile"></yd-input>
            </yd-cell-item>
          </div>
        </div>
      </div>
    </AppointmentRadio>
    <yd-cell-group>
      <yd-cell-item arrow class="item">
        <span slot="left">开始时间</span>
        <span slot="right">10/28 周四 上午</span>
      </yd-cell-item>

      <yd-cell-item arrow class="item">
        <span slot="left">结束时间</span>
        <span slot="right">10/28 周四 上午</span>
      </yd-cell-item>
    </yd-cell-group>

    <yd-button size="large" type="primary" class="btn-blue" @click.native="confirm">确认预约</yd-button>
  </div>
</template>
<script>
import AppointmentRadio from '../../base/Radio'
export default {
  name: 'AppointmentAgain',
  components: { AppointmentRadio },
  data() {
    return {
      appointmentPeople: '1',
      timePeriod: '1',
      num: '',
      name: '',
      phone: ''
    }
  },
  methods: {
    change(obj) {
      this.appointmentPeople = obj.appointmentPeople
      this.timePeriod = obj.timePeriod
    },
    confirm() {
      console.log(11111)
      console.log(this.num)
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl';
.appointment-again
  .result-top
    padding: 0.49rem 0 0.32rem;
    text-align: center;
    img
      width: 1.92rem;
      height: 1.92rem;
      display: block;
      margin: 0 auto 0.13rem;
    .result-title
      color: $darkText;
      font-size: 0.4rem;
      line-height: 0.56rem;
    .tip
      line-height: 0.28rem;
      font-size: 0.2rem;
      color: $darkText;
  >>>.yd-cell-box
    margin-bottom: 0.3rem;
  >>>.yd-cell
    background: none;
  .yd-cell-item:not(:last-child):after
    display: none;
  .item
    margin-bottom: 1px;
    background: $white;
    padding-left: 0.4rem;
    >>>.yd-cell-left
      font-weight: 500;
    >>>.yd-cell-left, >>>.yd-cell-right
      color: $darkText !important;
      font-size: 0.3rem;
    >>>.yd-cell-right
      padding-right: 0.34rem;
      span
        padding-right: 0.12rem;
  >>>.yd-radio>input[type=radio]:checked+.yd-radio-icon>i
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    transition: all 0.2s ease-in-out;
  >>>.yd-radio-icon>i
    width: 6px;
    height: 12px;
    top: 45%;
    left: 50%;
    border: 2px solid #fff;
    border-radius: 0;
    border-top: 0;
    border-left: 0;
    background-color: none;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
  >>>.yd-input
    span
      padding-right: 0!important;
    input
      text-align: right !important;
      color: $darkText;
  >>>.otherInfo
    background: $white;
    display: flex;
    margin-bottom: 1px;
    color: $darkText;
    font-size: 0.3rem;
    .left
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
      padding-left: 0.4rem;
      flex: 1;
    .right
      flex: 3;
      .yd-cell-item
        line-height: 1rem;
        text-align: right;
        flex: 1;
        .yd-cell-right
          padding-right: 0.34rem;
        &:first-child
          border-bottom: 1px solid $bgColor;
</style>
